<template>
	<view>
		<view class="lb-main-32">
			<view class="lb-item">
				<view class="item-left">
					头像
				</view>
				<view class="item-right">
					<!-- <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
					  <image class="avatar"  src="{{avatarUrl}}"></image>
					</button> -->
					<button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u-avatar :src="avatarUrl" size="80rpx"></u-avatar>
					</button>
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					昵称
				</view>
				<view class="item-right">
					<input type="nickname" v-model="FormData.nickname" placeholder="请输入昵称"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					姓名
				</view>
				<view class="item-right">
					<input type="text" v-model="FormData.name" placeholder="请输入姓名"
						placeholder-style="font-size: 28rpx; color: #999999;">
				</view>
			</view>
			<view class="lb-item">
				<view class="item-left">
					性别
				</view>
				<view class="item-right">
					<view class="right-item" v-for="(item,index) in sexData" :key="index" @click="selectSex(index)">
						<image :src="FormData.gender == index ? '/static/icon/yes.png':'/static/icon/no.png'"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>


			<view class="lb-btn" @click="formSubmit">
				保存修改
			</view>

		</view>
	</view>
</template>

<script>
	import {
		uploadFilesApi
	} from "@/api/apis/comm.js"
	import {
		setImgUrl,
		mobile,
		account
	} from "@/utils/comm.js"
	import {
		myApiEdit
	} from "@/api/apis/wash.js"
	export default {
		data() {
			return {
				sexIndex: 0,
				sexData: [{
						name: '男'
					},
					{
						name: '女'
					},
					{
						name: '保密'
					},
				],
				avatarUrl: '',
				FormData: {
					avatar: '',
					nickname: '',
					name: '',
					gender: 0,
				}

			}
		},

		methods: {
			//选择性别
			selectSex(i) {
				this.FormData.gender = i;
			},
			onChooseAvatar(e) {
				console.log(e);
				// const {
				// 	avatarUrl
				// } = e.detail
				// this.avatarUrl = e.detail
				let avatarPath = e.detail.avatarUrl;
				// console.log(image)
				uploadFilesApi(avatarPath).then(res => {
					if (res.code == 1) {
						let data = res.data;
						this.avatarUrl = data.fullurl
						this.FormData.avatar = data.url
					}
				});
			},

			//提交
			formSubmit() {
				let _this = this;
				if (!account(this.FormData.nickname)) {
					this.$u.toast('请输入昵称!');
					return;
				}
				if (!account(this.FormData.name)) {
					this.$u.toast('请输入姓名!');
					return;
				}
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				myApiEdit(this.FormData).then(res => {
					uni.hideLoading();
					_this.$u.toast('保存成功!');
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				})

			}

		},
		onShow() {
			// console.log(this.user_info,'+++jjj');
			this.FormData = {
				avatar: this.user_info.avatar,
				nickname: this.user_info.nickname,
				name: this.user_info.name,
				gender: this.user_info.gender,
			};
			this.avatarUrl = setImgUrl(this.user_info.avatar);
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		background: none;
		outline: none;
		padding: 0;
		margin: 0;
	}

	button:hover {
		background: none;
	}

	page {
		background-color: #FFFFFF;
	}

	.lb-tip {
		font-size: $main-font-20;
		color: #F65D40;
		padding: 12rpx 0;
	}

	.lb-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 42rpx 0 24rpx 0;
		border-top: 2rpx solid #F5F5F5;

		&:nth-of-type(1) {
			border: none;
			padding-top: 10rpx;
		}

		.item-left {
			width: 200rpx;
			font-size: $main-font-28;
			color: $main-font-color;


		}

		.item-right {
			width: calc(100% - 150rpx);

			display: flex;
			flex-direction: row;
			justify-content: flex-end;

			input {
				width: 100%;
				text-align: right;
				font-size: $main-font-28;
				color: $main-font-color;
			}

			.right-item {
				display: flex;
				flex-direction: row;
				padding-left: 72rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}

				text {
					font-size: $main-font-28;
					color: $main-font-color;
				}
			}

			.avatar {
				width: 84rpx;
				height: 84rpx;
				border: 4rpx solid #F5F5F5;
				border-radius: 50%;
				box-sizing: border-box;
			}
		}

	}


	.lb-btn {
		width: 600rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 44rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: $main-font-28;
		color: $main-font-color-white;
		margin: 140rpx auto 0;
	}
</style>